import React, {Component} from 'React';
import store from '../../store';
import { NavLink } from 'react-router-dom'
import './cart.css'
export default class shopCart extends Component{
    constructor(props){
        super(props);
        this.state=store.getState()
    }
    increase = () => {
        const count = this.state.count + 1;
        this.setState({ count });
    }
    decline = () => {
        let count = this.state.count - 1;
        if (count < 0) {
            count = 0;
        }
        this.setState({ count });
    }
    render(){
        if(this.state.loginStatus){
        return(
            <div id='Allbox'>
                <div id='car-header'>全部商品</div>
                <div id='car-nav'>
                    <div className="cart-thead">
                        <div className="cart-col t-checkbox">
                            <div className="cart-checkbox">
                                <input type="checkbox"  name="" id="" className="allsel" value="" /> 全选
                            </div>
                        </div>
                        <div className="cart-col t-goods">商品</div>
                        <div className="cart-col t-props"></div>
                        <div className="cart-col t-prices">单价(元)</div>
                        <div className="cart-col t-quantity">数量</div>
                        <div className="cart-col t-sum">小计(元)</div>
                        <div className="cart-col t-action">操作</div>
                    </div>
                </div>
               {/*商品列表 */}
                <div id='cart-list'>
                    <div className='cart-list-box'>
                        <div className='cart-list-check  cell'>
                            <input  type='checkbox' />
                        </div>
                        <div className='cart-list-sp cell'>
                            <div className='cart-list-sppic'></div>
                            <div className='cart-list-spname'>
                                <p>商品名称</p>
                            </div>
                        </div>
                        <div className='cart-list-spclass  cell'>
                            <p>商品分类</p>
                        </div>
                        <div className='cart-list-spprice  cell'>
                            <p>商品单价</p>
                        </div>
                        <div className='cart-list-spnumber  cell'>
                            <div className='numberbox' >
                                <a onClick={this.decline} className='numberdown'>-</a>
                                <input type='text'  value={this.state.count} />
                                <a onClick={this.increase}  className='numberup'>+</a>
                            </div>
                        </div>
                        <div className='cart-list-total  cell'>
                            <p>价格小计</p>
                        </div>
                        <div className='cart-list-operation  cell'>
                            <p>删除</p>
                        </div>
                    </div>
                </div>
            {/*购物车下方的全选 及商品总数   价格总计 */}
            <div id='cart-footer'>
                <div className='cart-footerinput'>
                    <input  type='checkbox'/>全选
                </div>
                <div className='cart-footercenter'>
                    <a href="javascript:void(0)">删除选中的商品</a>
                    <a href="javascript:void(0)">移到我的关注</a>
                </div>
                <div className='cart-footerright'>
                    <div className="cart-footer-price">
                        <span className="txt">总价（不含运费）：</span>
                        <span className="totalprice">￥0.00</span><br></br>
                        <span className="txt">已节省：</span>
                        <span className="totalsave">-￥0.00</span>
                    </div>
                    <div className="cart-footernumber">
                        已选择
                        <em className='em'>0</em> 件商品
                        <b></b>
                    </div>
                    <div className='cart-btn'>
                        <button>结算</button>
                    </div>
                </div>
            </div>
        </div>
        )
    }else{
        return(
            <div id='Allbox'>
                <div id='car-header'>全部商品</div>
                <div id='car-nav'>
                    <div className="cart-thead">
                        <div className="cart-col t-checkbox">
                            <div className="cart-checkbox">
                                <input type="checkbox"  name="" id="" className="allsel" value="" /> 全选
                            </div>
                        </div>
                        <div className="cart-col t-goods">商品</div>
                        <div className="cart-col t-props"></div>
                        <div className="cart-col t-prices">单价(元)</div>
                        <div className="cart-col t-quantity">数量</div>
                        <div className="cart-col t-sum">小计(元)</div>
                        <div className="cart-col t-action">操作</div>
                    </div>
                </div>
                <div className='cart-content'>
                    <img src='../../../public/indexHeader/img/shopcart.png'/>
                    <div className='cart-tips'>
                        <h2>亲，您的购物车空空如也！ </h2>
                        <NavLink className='login' to='/loginregister'>去登录</NavLink>
                        <NavLink className='login' to='/'>去购物</NavLink>
                    </div>
                </div>
            </div>
        )
      }
    }
}